﻿/******************************************************************************* 
 * Gestion des couleurs de themes 
*******************************************************************************/

.choix_theme{
    border-radius:5px;
    width:45px;
    height:45px;
    display:inline-block;
    cursor:pointer;
    margin:5px;
}

/* Voilet */

.theme0 header,.theme0 .btn_fermer_popup,.theme0 #popup .progress-bar, .theme0 .btn_appli, .theme0 .btn_fleche, .theme0 #btn_menu,
.theme0 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme0 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme0,.theme0 .panel-default > .panel-heading{
    background-color:rgb(87,61,125);
}

.theme0 .libelle_page{
    color:rgb(87,61,125);
}

.theme0 .panel-defaul0t,.theme0 .navbar-violet, .theme0 .panel-body{
	border-color : rgb(87,61,125);
}

/* Jaune */

.theme1 header,.theme1 .btn_fermer_popup,.theme1 #popup .progress-bar, .theme1 .btn_appli, .theme1 .btn_fleche, .theme1 #btn_menu,
.theme1 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme1 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme1,.theme1 .panel-default > .panel-heading{
    background-color:#FDD131;
}

.theme1 .libelle_page{
    color:#FDD131;
}

.theme1 .panel-default,.theme1 .navbar-violet, .theme1 .panel-body{
	border-color : #FDD131;
}

/* Rouge */

.theme2 header,.theme2 .btn_fermer_popup,.theme2 #popup .progress-bar, .theme2 .btn_appli, .theme2 .btn_fleche, .theme2 #btn_menu,
.theme2 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme2 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme2,.theme2 .panel-default > .panel-heading{
    background-color:#B9121B;
}

.theme2 .libelle_page{
    color:#B9121B;
}

.theme2 .panel-default,.theme2 .navbar-violet, .theme2 .panel-body{
	border-color : #B9121B;
}

/* Vert */

.theme3 header,.theme3 .btn_fermer_popup,.theme3 #popup .progress-bar, .theme3 .btn_appli, .theme3 .btn_fleche, .theme3 #btn_menu,
.theme3 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme3 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme3,.theme3 .panel-default > .panel-heading{
    background-color:#78A419;
}

.theme3 .libelle_page{
    color:#78A419;
}

.theme3 .panel-default,.theme3 .navbar-violet, .theme3 .panel-body{
	border-color : #78A419;
}

/* Bleu */

.theme4 header,.theme4 .btn_fermer_popup,.theme4 #popup .progress-bar, .theme4 .btn_appli, .theme4 .btn_fleche, .theme4 #btn_menu,
.theme4 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme4 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme4,.theme4 .panel-default > .panel-heading{
    background-color:#234CA5;
}

.theme4 .libelle_page{
    color:#234CA5;
}

.theme4 .panel-default,.theme4 .navbar-violet, .theme4 .panel-body{
	border-color : #234CA5;
}

/* Orange */

.theme5 header,.theme5 .btn_fermer_popup,.theme5 #popup .progress-bar, .theme5 .btn_appli, .theme5 .btn_fleche, .theme5 #btn_menu,
.theme5 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme5 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme5,.theme5 .panel-default > .panel-heading{
    background-color:#FF8900;
}

.theme5 .libelle_page{
    color:#FF8900;
}

.theme5 .panel-default,.theme5 .navbar-violet, .theme5 .panel-body{
	border-color : #FF8900;
}

/* Marron */

.theme6 header,.theme6 .btn_fermer_popup,.theme6 #popup .progress-bar, .theme6 .btn_appli, .theme6 .btn_fleche, .theme6 #btn_menu,
.theme6 #vue #affichage_qcm .affichage_choix .qcm_radio label:after,.theme6 #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after,
.couleur_theme6,.theme6 .panel-default > .panel-heading{
    background-color:#9A5315;
}

.theme6  .libelle_page{
    color:#9A5315;
}

.theme6 .panel-default,.theme6 .navbar-violet, .theme6 .panel-body{
	border-color : #9A5315;
}

/******************************************************************************* 
 *  CSS Principaux de base
*******************************************************************************/

body {
	margin: 0;
	font-family: Arial;
	font-size: 14px;
	background-color: #F9F9F9;
	overflow-x: hidden;
	height: 100%;
}

table {
	font-size: 14px;
}

ul{
	margin:0;
	padding:0;
}

.clear {
	clear: both;
}


/******************************************************************************* 
 *  Header
*******************************************************************************/

header{	
	height:48px;
	position:fixed;
	width:100%;
	z-index:100;	
	color:#FFFFFF;
	top:0;
}

header a{
	text-decoration:none;
	color:#FFFFFF;
	display:block;
}

header table{
	width:100%;
}


header #cellule_btn_retour{
	width:120px;	
}
header #cellule_recherche,  header #cellule_menu{
	width:60px;
}

 header #cellule_recherche #lien_recherche{	
	text-align:center;
	width:30px;
	height:30px;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
}

header #cellule_recherche #lien_recherche #img_recherche{
	width:30px;
	height:30px;	
}

header #cellule_titre_appli{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	vertical-align:middle;
}


/******************************************************************************* 
 *  Container
*******************************************************************************/

#main{
	padding-top: 50px;
	padding-bottom:10px;	
	position:relative;
}

#cache_chargement{	
	position:absolute;
	width:100%;
	height:100%;
	background:url('../images/loader.gif') fixed no-repeat 50% 50% #FFFFFF;
	z-index:10;
	content: 'Chargement';
	display:none;
}

#message_chargement{
	position:absolute;
}

.libelle_page{
	text-align:center;
	font-weight:bold;
	margin-bottom:20px;
	font-size: 18px;
}

.message_info{
	margin-left:auto;
	margin-right:auto;
	width:90%;
	text-align:center;
	font-weight:bold;
}

#vue, #vue_connexion{
	padding:20px;
	margin-bottom:65px;
}

/******************************************************************************* 
 *  Popup
*******************************************************************************/

#cache_popup{	
	width:100%;
	height:100%;
	z-index:150;
	background-color:#000000;
	position:fixed;
	top:0;
	left:0;
	filter : alpha(opacity=70);
    opacity : 0.7;
}

#popup{
	background-color: #F9F9F9;
	border-radius: 15px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.3);
	width: 330px;	
	position:fixed;
	z-index:200;
	text-align:center;
	display:none;
	padding:15px;
}

#popup{
	display:block;
}

.btn_fermer_popup{
	background:url('../images/fermer_popup.png') no-repeat center;
	position:absolute;
	border-radius:10px;
	width:30px;
	height:30px;
	top:-12px;
	right:-12px;
	border: solid 1px #000000;
	cursor:pointer;
}

#bloc_boutons_popup #btn_oui, #bloc_boutons_popup #btn_non{
	width:75px;
	display:inline-block;
}

#bloc_boutons_popup #btn_non{
	margin-left:20px;
}

#popup #message_popup{
	margin-top:20px;
	margin-bottom:30px;
	font-size: 15px;
	font-weight:bold;
}

/******************************************************************************* 
 *  Popup Mise à jour
*******************************************************************************/

#popup .progress-bar.erreur_mise_a_jour{
	background-color:#C72B10;
}

/******************************************************************************* 
 *  Menu
*******************************************************************************/

.info_etat_profil{
	padding-top:15px;
}


/******************************************************************************* 
 *  Accueil
*******************************************************************************/

.well-accueil {
    min-height: 20px;
    padding: 10px;
    border-radius: 10px;
    text-align:center;
    margin-bottom: 20px;
    color:#573D7D;
    background-color: #F2F2F2;
    border: 1px solid #573D7D;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.well-presentation{
    text-align : center;
}

#logo-accueil{
    width:200px;
    margin:0 auto;
}

.img-accueil{
    width:100px;
    margin:0 auto;
}

.barre-accueil{
    border-top:2px solid #e3e3e3;
    width:300px;
    margin:20px auto;
}


/******************************************************************************* 
 * Bouton Appli
*******************************************************************************/
.caret_down{ 	
	border-top: 5px solid #000000;
	border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
	position:absolute;	
}

.caret_up{	
	border-bottom: 5px solid #000000;
	border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
	position:absolute;
	display:none;
}

.btn_appli{	
	border-radius:6px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.3);
	text-decoration:none;	
	text-align: center;
	font-weight:bold;
	color:#FFFFFF;
	height:25px;	
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding-top:5px;
	cursor:pointer;
}

#bloc_boutons{	
	background:transparent;
	position:fixed;
	bottom:5px;
	right:100px;		
	margin-right:8px;	
}

.btn_fleche{
	background:url('../images/fleche_haut.png') no-repeat center;
	cursor: pointer;
	width:45px;
	height:45px;	
	border-radius:5px;
	margin-right:15px;
}

#btn_haut_page{	
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);		
	display:none;
}

#btn_retour{	
	transform:rotate(270deg);
	-ms-transform:rotate(270deg); 
	-moz-transform:rotate(270deg); 
	-webkit-transform:rotate(270deg); 
	-o-transform:rotate(270deg);	
	box-shadow:-2px 2px 2px rgba(0,0,0,0.5);
	display:none;
}

.block_lien{
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;	
}

.block_lien:hover, .block_lien:focus {
	text-decoration: none;
	color: #262626;
	background-color: #f5f5f5;
	cursor:pointer;
}

/******************************************************************************* 
 *  Recherche
*******************************************************************************/
#bloc_recherche {	
	padding: 5px;
	position: fixed;
	width: 300px;
}

#bloc_recherche legend{
	margin-bottom: 0px;
	font-size:14px;
}

#bloc_recherche div:first-child {
	margin-bottom: 10px;
}

#bloc_recherche #input_recherche {
	width: 100%;
	border-radius: 5px;
	height: 35px;	
}

#bloc_recherche #options_recherche_avancee{
	padding:2px;
	width: 115px;
}

#bloc_recherche #options_recherche_avancee .option{
	float: left;
	margin: 5px;
}

#bloc_resultats_recherche {
	margin-left: 340px;	
	margin-top: 10px;
}

#bloc_resultats_recherche #aucunResultat{
	display: none;
	margin-left:  auto;
	margin-right: auto;
	width: 100px;
}

#btn_reinitialiser_recherche {
	width: 100px;
	margin-top: 15px;
}

/******************************************************************************* 
 * Liste Themes
*******************************************************************************/

#vue #liste_themes, #vue #liste_qcm {
	width: 90%;
	margin-right:auto;
	margin-left:auto;
}

#vue #liste_themes {
	margin-bottom:20px;
}

#vue #liste_themes li{
	background-color:#DFDFDF;
	border:1px solid #AAAAAA;
	border-radius:5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	height:45px;
	list-style:none;
	margin-top:10px;
	margin-bottom:10px;
}

#vue #liste_themes li:nth-child(2n){
		background-color:#F3F3F3;
}

#vue #liste_themes .theme_hover{	
	box-shadow: 0px 0px 8px rgba(0,0,0,0.8);
}

#vue #liste_themes li a{
	padding-left:15px;
	padding-top:12px;
	display:block;
	text-decoration:none;
	color:#4C4C4C;
	font-size: 16px;
	font-weight: bold;
	height:100%;
}


/******************************************************************************* 
 * Liste QCM
*******************************************************************************/

#vue #liste_qcm .qcm_hover, #vue #resultats_recherche .qcm_hover{	
	box-shadow: 0px 0px 10px rgba(170,170,170,0.8);
	transform:scale(1.05);
	-o-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-ms-transform:scale(1.05);
	cursor: pointer;
}


#vue #liste_qcm .description_qcm, #vue #liste_qcm .niveau_qcm, #vue #liste_qcm .difficulte_qcm, 
#vue #resultats_recherche .description_qcm, #vue #resultats_recherche .niveau_qcm, #vue #resultats_recherche .difficulte_qcm{
	margin-top:5px;
	margin-bottom:5px;
	color:#4C4C4C;
	font-style:italic;
}

#vue #liste_qcm .description_qcm, #vue #resultats_recherche .description_qcm{
	padding: 5px;
}

#vue #liste_qcm .niveau_qcm, #vue #liste_qcm .difficulte_qcm, #vue #resultats_recherche .niveau_qcm, #vue #resultats_recherche .difficulte_qcm{
	display: inline-block;
}

#vue #liste_qcm .lien_qcm, #vue #resultats_recherche .lien_qcm{	
	width:50%;
}

/******************************************************************************* 
 * Affichage QCM
*******************************************************************************/

#vue #affichage_qcm {
	margin-left:30px;
	margin-right:30px;
}

#vue #affichage_qcm h3{	
	margin-top:25px;
	margin-bottom:5px;
}

#description_qcm {
	font-style: italic;
}

#vue #affichage_qcm .lien_indication_question div:first-child, #vue #affichage_qcm .lien_solution_question div:first-child{
	cursor: pointer;
	text-decoration: underline;
	padding-left: 20px;
	position: relative;
	margin-top:5px;
}

#vue #affichage_qcm .affichage_question .caret_down, #vue #affichage_qcm .affichage_question .caret_up {
	left: 5px;
	top: 6px;
	position: absolute;
}

#vue #affichage_qcm .indication_question, #vue #affichage_qcm .solution_question{
	background-color: #FDF29F;
	color:#4C4C4C;
	border-radius: 10px;
	display:none;
	padding: 5px;
}

#vue #affichage_qcm li{	
	list-style:none;
	margin-top:5px;
	margin-bottom:5px;
	
}

#vue #affichage_qcm .affichage_choix {
	margin-top: 15px;
}

#vue #affichage_qcm .affichage_choix li{
	background-color: #EBEBEB;
	padding:5px;
	border-radius:15px;	
	cursor:pointer;	
}

#vue #affichage_qcm input[type=radio] {
	visibility: hidden;
}

#vue #affichage_qcm input[type=checkbox] {
	visibility: hidden;
}

#vue #affichage_qcm .affichage_choix table td{
	height:100%;
	vertical-align:middle;
}

#vue #affichage_qcm .affichage_choix table td:nth-child(2){
	padding-left:5px;
	color: #4C4C4C;
	font-weight:bold;
	font-style:italic;
}

#vue #affichage_qcm .affichage_choix .qcm_radio, #vue #affichage_qcm .affichage_choix .qcm_checkbox{
	width: 20px;
	height: 20px;	
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	background-color: #EEEEEE;
	position: relative;
}
#vue #affichage_qcm .affichage_choix .qcm_radio{
	border-radius: 10px;
}

#vue #affichage_qcm .affichage_choix .qcm_radio label, #vue #affichage_qcm .affichage_choix .qcm_checkbox label {
	cursor: pointer;
	position: absolute;
	width: 14px;
	height: 14px;
	left: 3px;
	top: 3px;
	background-color:#AAAAAA;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);	
}

#vue #affichage_qcm .affichage_choix .qcm_radio label{
	border-radius: 7px;
}

#vue #affichage_qcm .affichage_choix .qcm_radio label:after, #vue #affichage_qcm .affichage_choix .qcm_checkbox label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	top: 1px;
	left: 1px;	
}

#vue #affichage_qcm .affichage_choix .qcm_radio label:after{
	border-radius: 6px;
}

#vue #affichage_qcm .affichage_choix .qcm_radio label.reponse_hover:after, #vue #affichage_qcm .affichage_choix .qcm_checkbox label.reponse_hover:after{
	filter: alpha(opacity=40);
	opacity: 0.4;
}

#vue #affichage_qcm .affichage_choix .qcm_radio  label.reponse_coche:after, #vue #affichage_qcm .affichage_choix .qcm_checkbox  label.reponse_coche:after{
	filter: alpha(opacity=100);
	opacity: 1;
}

#vue #affichage_qcm  .auncune_reponse{
	color:#C03000;
}

#vue #lien_check_qcm{
	margin-top:30px;
	width:65px;
	cursor: pointer;
}

#vue #lien_signaler_probleme{
	background-color:#B1221C;
	margin-top:40px;
	width:165px;
	cursor: pointer;
}

#vue #affichage_qcm .bonne_reponse{
	font-weight:bold;
}

#vue #affichage_qcm .bonne_reponse{
	background:url('../images/bonne_reponse.png') no-repeat center;
	width:15px;
	height:15px;
	display:inline-block;
	margin-left:5px;
}

#vue #affichage_qcm .mauvaise_reponse{
	background:url('../images/mauvaise_reponse.png') no-repeat center;
	width:14px;
	height:15px;
	display:inline-block;
	margin-left:5px;
}

#vue .resultat_qcm, #vue .message_evaluation{
	margin-top:20px;
	margin-bottom:20px;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}

/******************************************************************************* 
 * Connexion et Inscription
*******************************************************************************/

#vue_connexion{
	position:fixed;
	height:100%;
	width:100%;
	z-index:5;
	top:50px;
	background-color:#FFFFFF;
}

#formulaire_connexion{
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:375px;
}

#formulaire_connexion tr td{
	height:50px;
	vertical-align:middle;
}

#formulaire_connexion input, #vue #formulaire_contact input{
	width:100%;
	height:80%;
	border-radius: 5px;
}

#formulaire_connexion button{
	width:120px;
}

#select_compte{
	width:100%;
}
/******************************************************************************* 
 * Statistiques
*******************************************************************************/

#vue #statistiques, #vue #historique_qcm{
	margin-left:auto;
	margin-right:auto;
	width:400px;
}
#vue #statistiques{
	margin-bottom:30px;
}

#vue #statistiques tr td:first-child{
	font-weight:bold;
}

#vue #historique_qcm{
	list-style:none;
	margin-top:20px;
}

#vue #historique_qcm li{
	border-radius:5px;
	border:1px solid #AAAAAA;
	background-color:#FFFFFF;
	margin-bottom:8px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.3);
	padding:8px;
	cursor: pointer;
}

#vue #historique_qcm li table{
	width:100%;
}

#vue #historique_qcm li table td:first-child{
	width:68%;
	font-weight:bold;
}

#vue #historique_qcm li table td:nth-child(2){
	text-align:center;

}

#vue #historique_qcm li table td:nth-child(3){
	text-align:right;	
}

#vue #historique_qcm .details_historique{
	display: none;
}

#vue .zone_graphique{
	margin-top:20px;
	padding-left:5px; 	
	padding-right:5px;	
	width:850px;
	margin-left:auto;
	margin-right: auto;	
}

#vue .zone_graphique .graphique{
	float: left;		
}

#vue .zone_graphique .graphique_bar, #vue .zone_graphique .graphique_pie{		
	margin-left:auto;
    margin-right:auto;	
}

#vue .details_graphique{ 
	float:left;
	margin-top:70px;
	width:440px;
}

#vue .details_graphique .titre_details_graphique{
	font-weight: bold;
	margin-bottom:10px;
}

#vue .zone_graphique #graphique_stats_par_date{
	width:400px;
	height:400px;
	margin-left:auto;
	margin-right: auto;	
}

#vue .zone_graphique #graphique_stats_pourcentage_reussite_qcm, 
#vue .zone_graphique #graphique_stats_pourcentage_reussite_reponse{
	width:300px;
	height:300px;
	margin-left:auto;
	margin-right: auto;	
}

#vue .graphique_legende div{
	margin-left:auto;
	margin-right: auto;
	margin-top:5px;
	margin-bottom:5px;
	width:220px;
	text-align:center;
}

#vue .separteur_graphique{
	height:2px;
	background-color: #EEEEEE;
	width:90%;
	margin-top: 15px;
	margin-bottom: 15px;
	content: ' ';
}

#vue .separteur_details_graphique{		
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	width:50px;
	height:1px;
}

#vue .zone_graphique .btn_afficher_graphique, #vue .zone_graphique .btn_afficher_details{
	display:none;
}

/******************************************************************************* 
 * Contact
*******************************************************************************/

#vue #formulaire_contact{
	width:375px;
	margin-left:auto;
	margin-right:auto;
}
	
#vue #formulaire_contact select{
	width:100%;
	padding:8px;
	border-radius:5px;
}
	
#vue #formulaire_contact input{
	width:100%;
	border-radius: 5px;
	height:38px;
	margin-bottom:8px;
}	
	
#vue #formulaire_contact #select_type_formulaire_contact{
	margin-bottom:3px;	
}
	
#vue #formulaire_contact #select_qcm{
	display:none;	
	margin-bottom:8px;
	margin-top:5px;
}

#vue #formulaire_contact #message_contact{
	width:100%;
	height:200px;
	border-radius:5px;
	resize:none;
}

#vue #formulaire_contact  #btn_contact{	
	margin-top:20px;
	width:100px;	
}


/******************************************************************************* 
 * A propos
*******************************************************************************/

.bloc-membre{
    text-align:center;
    margin-bottom:40px;
}

.bloc-membre img{
    width:150px;
}

/******************************************************************************* 
 * Gestion des options
*******************************************************************************/

#options{
    margin-left:auto;
    margin-right:auto;
    width:375px;
}

/******************************************************************************* 
 * Medias query pour les petits formats 
*******************************************************************************/
@media handheld , only screen and (max-width: 850px) , only screen and
	(max-device-width: 850px) {

	#bloc_recherche {
		position: relative;
	}

	#bloc_recherche #options_recherche_avancee{
		width: 100%;
	}

	#bloc_resultats_recherche {
		margin-left: 0px;
	}

	#vue .zone_graphique{		
		padding:0px;
		width:100%;	
	}

	#vue .zone_graphique .graphique{
		display:none;
		float: none;		
	}

	#vue .zone_graphique .graphique_bar{
		width:350px;	
	}

	#vue .zone_graphique .graphique_pie{
		width:250px;	
	}

	#vue .details_graphique{
		margin-top: 0px;
		width:100%;
	}

	#vue .zone_graphique #graphique_stats_par_date{
		width:350px;
		height:350px;		
	}

	#vue .zone_graphique #graphique_stats_pourcentage_reussite_qcm, 
	#vue .zone_graphique #graphique_stats_pourcentage_reussite_reponse{
		width:250px;
		height:250px;		
	}

	#vue .zone_graphique .btn_afficher_graphique, #vue .zone_graphique .btn_afficher_details{
		display:block;
	}

	#vue .separteur_zone_graphique{		
		width:100%;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	#vue .separteur_details_graphique{		
		display:none;
	}
}

@media handheld , only screen and (max-width: 700px) , only screen and
	(max-device-width: 700px) {

	header #cellule_titre_appli{
		font-size:17px;
	}
	
}

@media handheld , only screen and (max-width: 565px) , only screen and
	(max-device-width: 565px) {
	#vue #liste_qcm{
		width:100%;
	}
	
	#vue #liste_qcm li{
		padding:5px 5px 0;
		margin:5px;
	}	
}

@media handheld , only screen and (max-width: 400px) , only screen and
	(max-device-width: 400px) {
	
	body {
		font-size: 12px;
	}
	
	table {
		font-size: 12px;
	}

	#resultats_recherche .niveau_qcm, #resultats_recherche .difficulte_qcm, #resultats_recherche .description_qcm{
		font-size:11px;
	}
		
	#vue #liste_themes li a{
		font-size:12px;
	}
		
	#bloc_boutons{	
		bottom:10px;		
	}

	#btn_haut_page.btn_fleche, #btn_retour{
		width: 34px;
		height: 34px;
	}
		
	#btn_haut_page {
		margin-right: 10px;
	}
		
	#vue #affichage_qcm {
		margin-left:20px;
		margin-right:20px;
	}
	
	#vue #formulaire_inscription, #vue #formulaire_contact, #formulaire_connexion{
		width:100%;
	}
	
	#vue #message_hors_ligne{
		width:100%;
	}

	#vue .zone_graphique .graphique_bar{
		width:325px;
	}

	#vue .zone_graphique .graphique_pie{
		width:225px;	
	}

	#vue .zone_graphique #graphique_stats_par_date{
		width:325px;
		height:325px;		
	}

	#vue .zone_graphique #graphique_stats_pourcentage_reussite_qcm, 
	#vue .zone_graphique #graphique_stats_pourcentage_reussite_reponse{
		width:225px;
		height:225px;		
	}

	#vue #statistiques, #vue #historique_qcm, #vue #options{
		width:100%;
	}
}

@media handheld , only screen and (max-width: 345px) , only screen and
	(max-device-width: 345px) {
		
	#popup{
		width:80%;		
	}
	
	.libelle_page{
		font-size: 16px;
	}
	
	#popup #message_popup {
		margin-top: 0px;
		margin-bottom: 0px;
		font-size:12px;
	}
	
	#vue,  #vue_connexion{
		padding: 10px;
		margin-bottom: 45px;
	}
	
	#vue #liste_qcm li{
		width:90%;
	}	
	
	#vue #options{
		width:100%;
	}

	#bloc_recherche {
		width: 100%;
	}
}

@media handheld , only screen and (max-width: 245px) , only screen and
	(max-device-width: 245px) {
	
	body {
		font-size: 11px;
	}
	
	table {
		font-size: 11px;
	}
	
	header #cellule_titre_appli{
		font-size:15px;
	}

}